<template>
	<view class="container">
		<!-- #ifdef APP-PLUS -->
		<!-- 右侧icon -->
		<view class="top-share-right-icon">
		    <uni-icons type="redo" size="20" color="#333" class="icon round cp" @tap="popup_share_event"></uni-icons>
		</view>
		<!-- #endif -->
		<view class="bg" :style="bgstyle">
			<image :src="picurl"></image>
		</view>
		<view v-if="awardsList.length > 0" class="main-box">
			<view class="title-h1">
				<image :src="picurl_ad"></image>
			</view>
			<view class="body-one">
				<image :src="dazhuanpan_static_url+'mini/draw-one-bg-one.png'"></image>
			</view>
			<view class="draw-box">
				<image :src="dazhuanpan_static_url+'mini/draw-one-bg-two.png'"></image>
				<view class="draw-dian">
					<image :src="dazhuanpan_static_url+'mini/draw-one-dian.png'" mode="" v-if="dianimage == 0"></image>
					<image :src="dazhuanpan_static_url+'mini/draw-one-dian-one.png'" mode="" v-if="dianimage == 1"></image>
				</view>
				<view class="draw-bg">
					<view class="canvas-container">	
						<view :animation="animationData" class="canvas-content" id="zhuanpano" :style="style">
						<!-- <view :animation="animationData" class="canvas-content" id="zhuanpano"  :style="[{transform:'rotate('+runDeg+')'}]"> -->
							<!-- <canvas class="canvas" canvas-id="canvas"></canvas> -->
							<view class="canvas-line">
								<view class="canvas-litem" v-for="(item,index1) in awardsList" :key="index1" :style="[{transform:'rotate('+item.lineTurn+')'}]"></view>
							</view>
								
							<view class="canvas-list">
								<view class="canvas-item" :style="[{zIndex:index2}]" v-for="(iteml,index2) in awardsList" :key="index2">
									<view class="canvas-item-text" :style="[{transform:'rotate('+iteml.turn+')'}]">
										<text>{{iteml.title}}</text>
										<image class="canvas-item-text-img" :src="iteml.img" mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!--<view :class="'body-box '+mainname +' '+endname">
						<image :src="dazhuanpan_static_url+'draw-one-box.png'" mode=""></image>
						<view :class="'body-main t'+(index+1)" v-for="(item,index) in domearr" :key="index">
							<view class="title">
								{{item.title}}
							</view>
							<view class="image">
								<image :src="item.img" mode="aspectFit"></image>
							</view>
						</view>
					</view>-->
					<view class="draw-btn" @tap="playReward">
						<image :src="dazhuanpan_static_url+'mini/draw-one-main.png'" mode=""></image>
					</view>
				</view>

			</view>
			
			<view class="main-title">
				<text v-if="baseinfo.xiaohao_style == 1" class="count">
				    {{$t('fengcheche.dazhuanpan.nowyouhave')}}
				    <text class="t1">{{ userInfo.integral }}</text>
				    {{$t('fengcheche.dazhuanpan.jifen')}}<text class="t2">（{{$t('fengcheche.dazhuanpan.eveytime')}}{{baseinfo.jifen}}{{$t('fengcheche.dazhuanpan.jifen')}})</text>
				</text>
				<text v-else class="count">
				    {{$t('fengcheche.dazhuanpan.nowyouhave')}}
				    <text class="t1">{{ count }}</text>
				    {{$t('fengcheche.dazhuanpan.jihui')}}<text class="t2"></text>
				</text>
				<view class="userinfo">
				    <view class="userinfo-tx">
				        <view class="userinfo-money" @tap="goToList"><text v-if="free_cishu>0" style="color:red;margin-right:10rpx;font-size:24rpx;">尚有{{free_cishu}}次免费机会</text><text>{{$t('fengcheche.dazhuanpan.jilu')}}></text></view>
				    </view>
				</view>
			</view>
			
			<!--<view class="uni-swiper">
				<view class="swiper">
					<swiper :indicator-dots="indicator" :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true" class="swiper">
						<swiper-item>
							<view class="text">
								恭喜 樱桃小丸子1 抽到88元现金红包
							</view>
						</swiper-item>
						<swiper-item>
							<view class="text">
								恭喜 樱桃小丸子2 抽到88元现金红包
							</view>
						</swiper-item>
						<swiper-item>
							<view class="text">
								恭喜 樱桃小丸子3 抽到88元现金红包
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="swiper-bg">
					<image :src="dazhuanpan_static_url+'draw-one-swiper.png'" mode=""></image>
				</view>
			</view>-->
			
			<view class="guize">
				<view v-if="(datainfo || null) != null && (datainfo.guize || null) != null" class="padding-main web-html-content">
				    <mp-html :content="datainfo.guize" />
				</view>
			</view>
			
			<!-- 分享弹窗 -->
			<component-share-popup :diyTheme="diytheme" ref="share"></component-share-popup>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import componentSharePopup from "@/components/share-popup/share-popup";
	var dazhuanpan_static_url = app.globalData.get_static_url('dazhuanpan', true);
	export default {
		data() {
			return {
				dazhuanpan_static_url: dazhuanpan_static_url,
				indicator: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				dianimage: 0,
				bgtimer: null,
				mainbind :false,
				data_list_loding_status: 1,
				post_data: {},
				data_list_loding_msg: {},
				userInfo: {},
				hasUserInfo: false,
				baseinfo:{},
				datainfo:null,
				isres:0,//是否有转盘数据
				
				awardsConfig: {
					chance: true, //是否有抽奖机会
					lists: [], //奖品列表 
				},
				awardsList: [],
				animationData: {},
				btnDisabled: '',
				thanksarr: [], //存储谢谢参与的索引
				count: 0,
				mold: 1,
				r_flg: 0,
				myPrizelist:[],
				runDegs: 0,
				style:'',
				picurl:dazhuanpan_static_url+'mini/draw-one-bg.png',
				picurl_ad:dazhuanpan_static_url+'mini/draw-one-title.png',
				bgstyle:'background:#6489cc;',
				share_info:{},
				diytheme:null,
				free_cishu: 0,
			}
		},
		components: {
			componentSharePopup
		},
		onLoad(params){
			this.setData({
			    post_data: params
			});
		},
		onShow() {
		    app.globalData.page_event_onshow_handle();
			
			this.init();
		},
		// 下拉刷新
		onPullDownRefresh() {
		    this.init();
		},
		methods: {
			// 初始化
			init() {
			    var user = app.globalData.get_user_info(this, 'init');
			    if (user != false) {
			        // 获取数据
			        this.get_data_list();
			        
			        // 自动抽奖一次
			        if((this.post_data.auto || null) != null){
			        	setTimeout(function() {
			        	    self.playReward();
			        	}, 1000);
			        }
			    } else {
			        this.setData({
			            data_list_loding_status: 0
			        });
			    }
			},
			// 分享开启弹层
			popup_share_event(e) {
			    if ((this.$refs.share || null) != null) {
			        this.$refs.share.init({
			            status: true,
			            share_info: this.share_info
			        });
			    }
			},
			// 初始化信息，用户信息，转盘信息
			get_data_list() {
			    // 加载loding
			    uni.showLoading({
			        title: this.$t('common.loading_in_text'),
			    });
			    this.setData({
			        data_list_loding_status: 1
			    }); // 参数
			
			    var post_data = this.post_data; // 获取数据
			
			    uni.request({
			        url: app.globalData.get_request_url('index', 'index', 'dazhuanpan'),
			        method: 'POST',
			        data: post_data,
			        dataType: 'json',
			        header: {
			            'content-type': 'application/x-www-form-urlencoded'
			        },
			        success: (res) => {
			            uni.hideLoading();
			            uni.stopPullDownRefresh();
			            console.log(res);
			
			            if (res.data.code == 0) {
			                var lastdata = res.data.data.data;
			
			                if (lastdata.content != '') {
			                    if (lastdata.content.jiang_title.length > 0) {
			                        var temp_data_list = [];
			                        var temp_data = [];
			                        var countk = 0;
			
			                        for (var i = 0; i < lastdata.content.jiang_title.length; i++) {
			                            temp_data.push({}); //初始化temp_data，不然下方直接赋值会报错
			                        }
			
			                        for (var i = 0; i < lastdata.content.jiang_title.length; i++) {
			                            temp_data[i]['index'] = i;
			                            temp_data[i]['title'] = lastdata.content.jiang_title[i];
			                            temp_data[i]['img'] = lastdata.content.jiang_picurl_value[i];
			                            temp_data[i]['type'] = lastdata.content.jiang_type[i];
			                            temp_data_list.push(temp_data[i]);
			                            countk++;
			                        }
			                    } else {
			                        var temp_data_list = [];
			                        var countk = 0;
			                    }
			
			                    var temp_awardsConfig = [];
			                    temp_awardsConfig['count'] = countk;
			                    temp_awardsConfig['lists'] = temp_data_list;
								
								var count = res.data.data.user.cannum;
								if(res.data.data.base.xiaohao_style == 1){
									count = res.data.data.user.integral;
								}
								var bg_color = res.data.data.data.bg_color || null;
								var bgstyle = this.bgstyle;
								if(bg_color != null){
									bgstyle = 'background:'+bg_color+';';
								}
								let qy = (post_data.id || null) != null ? 'id=' + post_data.id : '';
			                    this.setData({
			                        isres: countk,
									count:count,
			                        awardsConfig: temp_awardsConfig,
			                        baseinfo: res.data.data.base,
			                        userInfo: res.data.data.user,
			                        datainfo: res.data.data.data,
									free_cishu: parseInt(res.data.data.free_cishu),
			                        hasUserInfo: true,
									picurl:res.data.data.data.picurl || this.picurl,
									picurl_ad:res.data.data.data.picurl_ad || this.picurl_ad,
									bgstyle:bgstyle,
									share_info:{
										title: lastdata.title,
										kds: lastdata.title,
										desc: lastdata.title,
										path: '/pages/fcc/dazhuanpan/dazhuanpan',
										query: qy,
									}
			                    });
								
								// 标题
								uni.setNavigationBarTitle({
								    title: lastdata.title
								});
								
								// 分享菜单处理
								app.globalData.page_share_handle(this.share_info);
								
								// 去绘制转盘
			                    this.dozhuanpan();
			                } else {
			                    this.setData({
			                        data_list_loding_status: 0,
			                        data_list_loding_msg: this.$t('fengcheche.dazhuanpan.xiangerro')
			                    });
			                }
			            } else {
			                if (app.globalData.is_login_check(res.data, this, 'get_data_list')) {
			                    app.globalData.showToast(res.data.msg);
			                }
			
			                this.setData({
			                    data_list_loding_status: 0,
			                    data_list_loding_msg: res.data.msg
			                });
			            }
			        },
			        fail: () => {
			            uni.hideLoading();
			            uni.stopPullDownRefresh();
			            this.setData({
			                data_list_loding_status: 2
			            });
			            app.globalData.showToast(this.$t('common.internet_error_tips'));
			        }
			    });
			},
			
			// 绘制转盘
			dozhuanpan() {
				var that = this; // 绘制转盘
				
				// 拿到奖品列表
				var awards = that.awardsConfig.lists;
				var awardsList = [];
				
				// 每份奖品所占角度
				var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值  
				
				// 奖项列表  
				for (var i = 0; i < awards.length; i++) {
					awardsList.push({
						turn: i * turnNum + 'deg', //每个奖品块旋转的角度
						lineTurn: i * turnNum + turnNum / 2 + 'deg', //奖品分割线的旋转角度
						title: awards[i].title,
						img: awards[i].img,
						type:awards[i].type,
					});
				}
				
			    that.setData({
			        awardsList: awardsList,
					btnDisabled: that.count ? '' : 'disabled'
			    });
			},
			
			//发起抽奖
			playReward: function() {
				var that = this
				if(that.free_cishu == 0)
				{
					// that.runDeg = 60*Math.random()
					if (that.baseinfo.xiaohao_style == 1) {
						if (parseInt(that.userInfo.integral) < parseInt(that.baseinfo.jifen)) {
							//判断用户抽奖积分是否够
							app.globalData.showToast(this.$t('fengcheche.dazhuanpan.jfnotenough'));
							return false;
						}
					} else {
						if (parseInt(that.count) < 1) {
							//判断用户抽奖机会是否大于等于1
							app.globalData.showToast(this.$t('fengcheche.dazhuanpan.jhnotenough'));
							return false;
						}
					}
				}
				// 总控制
				if(that.mainbind == false){
					this.setData({
						mainbind: true,
					});
					var post_data = that.post_data;
					post_data['id'] = that.datainfo.id; //活动ID
					post_data['type'] = that.baseinfo.xiaohao_style; //消耗方式，0：机会，1：积分
					
					if (that.baseinfo.xiaohao_style == 1) {
						post_data['num'] = that.baseinfo.jifen;
					} else {
						post_data['num'] = that.baseinfo.jihui;
					} 
					this.paomalight();
					uni.request({
						url: app.globalData.get_request_url('choujiang', 'index', 'dazhuanpan'),
						method: 'POST',
						data: post_data,
						dataType: 'json',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: (res) => {
							uni.hideLoading();
							uni.stopPullDownRefresh();
							console.log(res);
					
							if (res.data.code == 0) {
								var awardIndex = res.data.data.jiang_id;
								var jiang_type = that.datainfo.content.jiang_type;
								var jiang_value = that.datainfo.content.jiang_value;
								if(parseInt(jiang_type[awardIndex]) == 4)
								{
									// 如果是积分类型的奖项，则给积分加到当前用户的积分里
									var user_temp = that.userInfo;
									user_temp['integral'] = parseInt(that.userInfo.integral) + parseInt(jiang_value[awardIndex]);
									that.setData({
										userInfo: user_temp
									});
								} 
								if(that.free_cishu > 0)
								{
									that.setData({
										free_cishu: that.free_cishu - 1,
									});
								}else{
									if (that.baseinfo.xiaohao_style == 1) {
										// 积分足够则扣减积分
										var user_temp = that.userInfo;
										user_temp['integral'] = parseInt(that.userInfo.integral) - parseInt(that.baseinfo.jifen);
										that.setData({
											userInfo: user_temp
										});
									} else {
										that.setData({
											count: that.count - 1,
										});
									} 
								}
								
								that.realchoujiang(awardIndex);
							} else {
								app.globalData.showToast(res.data.msg);
								this.setData({
									mainbind: false,
									data_bottom_line_status: false,
									data_list_loding_status: 0,
									data_list_loding_msg: res.data.msg
								});
							}
						},
						fail: () => {
							uni.stopPullDownRefresh();
							this.setData({
								mainbind: false,
								data_list_loding_status: 2
							});
							app.globalData.showToast(this.$t('common.internet_error_tips'));
						},
						complete: ()=>{
							this.paomalight();
						}
					});
				}
			},
			realchoujiang(awardIndex) {
				var that = this;
				var awardsNum = that.awardsConfig.lists;
				// var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数  
				var runNum = 4; //旋转8周  
				var duration = 4000; //时长  
			
				// 旋转角度  
				that.runDeg = that.runDeg || 0;
				let preDeg = that.runDeg
				that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - awardIndex * (360 / awardsNum.length)) +1
				//创建动画  
				/*if(process.env.VUE_APP_PLATFORM == 'h5'){
					// document.styleSheets[0]
					document.getElementById('zhuanpano').style='animation:rotate_before 4s 0ms ease forwards;'
					if(document.styleSheets[0].cssRules.length>0){
						Array.from(document.styleSheets[0].cssRules).forEach(function(element,index){
							if(element.name == 'rotate_before'){
								// 删除上次插入的动画
								document.styleSheets[0].deleteRule(index)
							}
						})
					}
					
					// console.log(document.styleSheets[0].cssRules)
					// console.log("@keyframes rotate_before{from{ transform: rotate("+preDeg+"deg); }to{ transform: rotate("+that.runDeg+"deg);}}")
					// 插入定义的动画
					document.styleSheets[0].insertRule("@keyframes rotate_before{from{ transform: rotate("+preDeg+"deg); }to{ transform: rotate("+that.runDeg+"deg);}}",8);
					
				}else{*/
					var animationRun = uni.createAnimation({
						duration: duration,
						timingFunction: 'ease'
					})
					animationRun.rotate(that.runDeg).step();
					that.animationData = animationRun.export();
				//}

				that.btnDisabled = 'disabled';
				that.setData({
					btnDisabled: 'disabled',
				});
				// 中奖提示  
				var awardsConfig = that.awardsConfig;
				var awardType = awardsConfig.lists[awardIndex].type;
				
				if (awardType != 0) {
					setTimeout(function() {
						uni.showModal({
							title: this.$t('fengcheche.dazhuanpan.gongxi'),
							content: this.$t('fengcheche.dazhuanpan.huode') + (awardsConfig.lists[awardIndex].title),
							confirmText: this.$t('common.confirm'),
							showCancel: false,
							success:function(){
								// 置空style  否则动画不生效
								setTimeout(function(){
									//document.getElementById('zhuanpano').style=''
									that.setData({
										style: '',
									});
								},1000)
							}
						});
						that.btnDisabled = '';
						that.setData({
							mainbind: false,
						});
					}.bind(that), duration);
				} else {
					setTimeout(function() {
						uni.showModal({
							title: this.$t('fengcheche.dazhuanpan.yihan'),
							content: this.$t('fengcheche.dazhuanpan.notzhong')+' ' + (awardsConfig.lists[awardIndex].title),
							showCancel: false,
							success:function(){
								// 置空style  否则动画不生效
								setTimeout(function(){
									//document.getElementById('zhuanpano').style=''
									that.setData({
										style: '',
									});
								},1000)
							}
						});
						that.btnDisabled = '';
						that.setData({
							mainbind: false,
						});
					}.bind(that), duration);
				}
				that.setData({
					btnDisabled: '',
				});
			},
			
			// 跑马灯
			paomalight(){
				let paoma = setInterval(()=>{
					if(this.mainbind){
						if(this.dianimage == 0){
							this.dianimage = 1;
						}else{
							this.dianimage = 0;
						}
					}else{
						clearInterval(paoma);
					}
				},500);
			},
			
			//跳转到个人中心
			goToList: function () {
			    var that = this;
			    app.globalData.url_open('/pages/fcc/dazhuanpan/list/list');
			}
		}
	}
</script>

<style>
	/*每个页面公共css */
	image{
		width:100%;
		height: 100%;
	}
	.container {
		width: 750rpx;
		position: relative;
		margin: 0 auto;
	}

	.bg {
		width: 750rpx;
		height: 1250rpx;
		margin-bottom: -1250rpx;
	}

	.main-box {
		width: 750rpx;
		position: relative;
		margin: 0 auto;
	}

	.title-h1 {
		width: 600rpx;
		height: 168rpx;
		margin: 0 auto;
		margin-top: 90rpx;
	}

	.body-one {
		width: 750rpx;
		height: 376rpx;
		margin-top: 420rpx;
		position: relative;
		z-index: 2;
	}

	.draw-box {
		width: 600rpx;
		height: 653rpx;
		margin: 0 auto;
		margin-top: -700rpx;
		position: relative;
		z-index: 1;
	}

	.draw-bg {
		width: 520rpx;
		height: 520rpx;
		position: absolute;
		top: 40rpx;
		left: 40rpx;
		overflow: hidden;
		border-radius: 50%;
	}

	.draw-dian {
		width: 600rpx;
		height: 653rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.draw-btn {
		width: 165rpx;
		height: 179rpx;
		position: absolute;
		z-index: 1;
		top: 160rpx;
		left: calc(50% - 82.5rpx);
	}

	.body-box {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 0;
	}

	.body-main {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
	}

	.body-main .title {
		line-height: 50rpx;
		color: #ff6642;
		text-align: center;
		font-size: 24rpx;
		margin-top: 40rpx;
	}

	.body-main .image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin: 0 auto;
		margin-top: 10rpx;
		background-color: red;
	}

	.main-title {
		line-height: 60rpx;
		font-size: 28rpx;
		text-align: center;
		color: #fefeff;
		margin-top: 40rpx;
		width: 100%;
	}

	.main-title .t1 {
		display: inline-block;
		vertical-align: top;
		margin: 0 20rpx;
		color: #ffdd52;
	}

	.uni-swiper {
		width: 540rpx;
		height: 85rpx;
		position: relative;
		margin: 0 auto;
		margin-top: 20rpx;
		overflow: hidden;
	}

	.swiper-bg {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	.swiper {
		width: 540rpx;
		height: 85rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		line-height: 75rpx;
		text-align: center;
		font-size: 26rpx;
		color: #ffffff;
	}
	
	/* 转盘 */
		.canvas-container {
			margin: 0 auto;
			position: relative;
			width: 520rpx;
			height: 520rpx;
			background: #fff;/*url(../../static/img/circle.png) no-repeat;*/
			background-size: cover;
			border-radius: 50%;
		}
	
		.canvas {
			width: 100%;
			height: 100%;
			display: block !important;
			border-radius: 50%;
		}
	
		.canvas-content {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			display: block;
			width: 520rpx;
			height: 520rpx;
			border-radius: inherit;
			/* background-clip: padding-box; */
			/* background-color: #ffcb3f; */
		}
	
		.canvas-element {
			position: relative;
			z-index: 1;
			width: inherit;
			height: inherit;
			border-radius: 50%;
		}
	
		.canvas-list {
			position: absolute;
			left: 0;
			top: 0;
			width: inherit;
			height: inherit;
			z-index: 9999;
		}
	
		.canvas-item {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			color: #F1B622;
			/* text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6); */
		}
	
		.canvas-item-text {
			position: relative;
			display: block;
			padding-top: 46upx;
			margin: 0 auto;
			text-align: center;
			-webkit-transform-origin: 50% 260rpx;
			transform-origin: 50% 260rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #F1B622;
		}
	
		.canvas-item-text text {
			font-size: 30upx;
		}
	
		.canvas-item-text-img {
			width: 50upx;
			height: 50upx;
			padding-top: 30upx;
		}
	
		/* 分隔线 */
		.canvas-line {
			position: absolute;
			left: 0;
			top: 0;
			width: inherit;
			height: inherit;
			z-index: 99;
		}
	
		.canvas-litem {
			position: absolute;
			left: 260upx;
			top: 0;
			width: 3upx;
			height: 260upx;
			background-color: rgba(228, 55, 14, 0.4);
			overflow: hidden;
			-webkit-transform-origin: 50% 260upx;
			transform-origin: 50% 260upx;
		}
	
		.canvas-btn-table {
			color: #A83FDB;
			width: 120upx;
			text-align: center;
			position: absolute;
			left: 240upx;
			top: 360upx;
			font-size: 26upx;
			background-color: #FFFFFF;
			opacity: 0.9;
		}
	
		.typecheckbox {
			width: 100%;
			position: relative;
			z-index: 3;
			display: flex;
			justify-content: space-between;
			padding: 20upx;
			box-sizing: border-box;
			color: #fff;
			font-size: 28upx;
			top: -120upx;
			flex-direction: column;
			height: 180upx;
			align-items: flex-end;
			/* padding-top: 46upx; */
		}
	
		.typecheckbox view {
			border: 1px solid #FF3637;
			background: transparent;
			color: #FF3637;
			display: flex;
			height: 60upx;
			width: 140upx;
			border-radius: 50upx;
			align-items: center;
			justify-content: center;
			display: flex;
			margin-left: 20upx;
		}
	
		.typecheckbox view.active {
			background: #FF3637;
			color: #fff;
		}
	
		.guize {
			min-height: 260rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 3;
			background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
			border: 18rpx solid #E4431A;
			border-radius: 0;
			margin: 0 auto;
			margin-top:20rpx;
			padding:50rpx;
			/* box-sizing: border-box; */
			color: #fff;
		}
	
		.guize .title {
			text-align: center;
			margin-bottom: 28upx;
		}
	
		.guize .g_item {
			font-family: PingFang-SC-Medium;
			font-size: 24upx;
			color: #FFFFFF;
			letter-spacing: 0.5px;
			text-align: justify;
			line-height: 20px;
		}
	
		.shadowbox {
			width: 750upx;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			background: rgba(0, 0, 0, .6);
			display: flex;
			justify-content: center;
			align-items: center;
	
		}
	
		.myrewards {
			width: 600upx;
			min-height: 80upx;
			background: #FFEEDF;
			border: 10upx solid #F2692F;
			color: #333;
			font-size: 24upx;
			font-family: PingFang-SC-Medium;
			border-radius: 40upx;
			padding-bottom: 20upx;
		}
	
		.myrewards .title {
			font-family: PingFang-SC-Bold;
			font-size: 16px;
			color: #E4431A;
			letter-spacing: 0.57px;
			display: flex;
			padding-top: 36upx;
			justify-content: center;
		}
	
		.myrewards .itembox {
	
			max-height: 320upx;
			overflow-y: auto;
		}
	
		.myrewards .item {
			width: 100%;
			height: 66upx;
			padding: 0 32upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
</style>
